<template>
	<view class="page-body">
		<el-row :gutter="15">
			<el-form ref="form1" :model="form1" :rules="rules" size="medium" label-width="100px">
				<el-col :span="16">
					<el-form-item label="直播标题" prop="title">
						<el-input v-model="form1.title" placeholder="请输入直播标题" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="所属章节" prop="chapter_id">
						<el-select v-model="form1.chapter_id" placeholder="请选择视频章节" clearable :style="{width: '100%'}">
							<el-option v-for="(item, index) in chapterList" :key="index" :label="item.title"
								:value="item._id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="直播时间" prop="published_at">
						<el-date-picker v-model="form1.published_at" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="是否录制" prop="push_live_record">
						<el-switch v-model="form1.push_live_record" :active-value="1" :inactive-value="0">
						</el-switch>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item size="large">
						<el-button type="primary" @click="submitForm">提交</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<aliyun-vod-upload ref="aliyunVodUpload" @success="aliyunVodUploadSuccess"></aliyun-vod-upload>
	</view>
</template>
<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	export default {
		props: ['action', 'form-type', 'item', 'cid'],
		components: {},
		data() {
			return {
				chapterList: [],
				form1: {
					title: undefined,
					course_id: undefined,
					chapter_id: undefined,
					published_at: null,
					push_live_record: 0,
					is_show: 1,
					ban_drag: false,
					comment_status: 1,
					short_description: undefined,
					render_desc: null,
					free_seconds: 0,
					duration: 0,
					use_type: "url",
					url: "",
					aliyun_video_id: ""
				},
				rules: {
					title: [{
						required: true,
						message: '请输入课程标题',
						trigger: 'blur'
					}],
					course_id: [{
						required: true,
						message: '未关联课程',
						trigger: 'blur'
					}],
					chapter_id: [{
						required: true,
						message: '请选择所属章节',
						trigger: 'blur'
					}],
					published_at: [{
						required: true,
						message: '请选择上架时间',
						trigger: 'change'
					}],
					is_show: [{
						required: true,
						message: '请选择课程状态',
						trigger: 'change'
					}],
					ban_drag: [{
						required: true,
						message: '请选择是否允许快进',
						trigger: 'change'
					}],
					duration: [{
						required: true,
						message: '请填写视频时长',
						trigger: 'change'
					}],
					use_type: [{
						required: true,
						message: '请上传视频',
						trigger: 'change'
					}],
					short_description: [{
						required: false,
						message: '请输入视频简介',
						trigger: 'blur'
					}],
					render_desc: [{
						required: false,
						message: '请输入视频描述/讲义',
						trigger: 'blur'
					}],
				},
				is_showOptions: [{
					"label": "显示",
					"value": 1
				}, {
					"label": "隐藏",
					"value": 0
				}],
				comment_statusOptions: [{
					"label": "关闭评论",
					"value": 0
				}, {
					"label": "所有人",
					"value": 1
				}, {
					"label": "仅购买",
					"value": 2
				}]
			}
		},
		//监听-页面每次【加载时】执行(如:前进)
		onLoad(options = {}) {},
		created() {
			that = this;
			vk = that.vk;
			this.form1.course_id = this.cid
			that.getChapters()
			if (this.formType == "update") {
				this.form1 = this.item
			}
		},
		mounted() {},
		methods: {
			//阿里云点播上传成功
			aliyunVodUploadSuccess(uoloadInfo) {
				this.form1.aliyun_video_id = uoloadInfo.videoId
			},
			uploadVideo() {},
			uploadAliyunVideo() {
				this.$refs.aliyunVodUpload.chooseVideo(this.form1.title)
			},
			getChapters() {
				vk.callFunction({
					url: 'admin/video_course/chapter/sys/chapters',
					data: {
						cid: that.form1.course_id
					},
					success(data) {
						that.chapterList = data.rows
					}
				});
			},
			//页面数据初始化函数
			init(options) {},
			submitForm() {
				this.$refs['form1'].validate(valid => {
					if (!valid) return
					vk.callFunction({
						url: this.action,
						title: '提交中...',
						data: this.form1,
						success(data) {
							that.$emit("success")
						}
					});
				})
			},
			resetForm() {
				this.$refs['form1'].resetFields()
			},
			checkLength() {
				uni.showLoading({
					title: '获取时长中'
				})
				let audioElement = new Audio(this.form1.url);
				let duration;
				audioElement.addEventListener("loadedmetadata", function(_event) {
					duration = audioElement.duration;
					that.form1.duration = duration;

					uni.hideLoading()
				});
			}
		},
		// 监听器
		watch: {},
		// 过滤器
		filters: {},
		// 计算属性
		computed: {},
	}
</script>
<style lang="scss" scoped>
	.el-upload__tip {
		line-height: 1.2;
	}

	.page-body {
		max-width: 1200px !important;
		margin: 0 auto;
	}
</style>
